<template>
  <div class="box">
    <!-- 镇店之宝 -->
    <titles/>
    <ul class="zhendian">
      <li><img
          src="https://img.youpin.mi-img.com/jianyu/d0c9a54df57e758a99274d754b2c5418.jpeg@base@tag=imgScale&h=490&m=1&q=80&w=750"
          alt=""></li>
      <li><img
          src="https://img.youpin.mi-img.com/jianyu/f45b07b813457882d5909036a5ed0bc3.jpeg@base@tag=imgScale&h=364&m=1&q=80&w=750"
          alt=""></li>
      <li><img
          src="https://img.youpin.mi-img.com/jianyu/f287c26e7f1f273007362680904468ff.jpeg@base@tag=imgScale&h=366&m=1&q=80&w=750"
          alt=""></li>
    </ul>
    <!-- 人气单品 -->
    <ul class="renqi">
      <li><img
          src="https://img.youpin.mi-img.com/jianyu/be4e81cb43e18a00bc2ab34ec51a7a13.jpeg@base@tag=imgScale&h=505&m=1&q=80&w=750"
          alt=""></li>
      <li><img
          src="https://img.youpin.mi-img.com/jianyu/4b7394de674d7c0c5c10d95042478e6f.jpeg@base@tag=imgScale&h=364&m=1&q=80&w=750"
          alt=""></li>
      <li><img
          src="https://img.youpin.mi-img.com/jianyu/5c82527596d59ac52c224e3aa0edbeaa.jpeg@base@tag=imgScale&h=367&m=1&q=80&w=750"
          alt=""></li>
      <li><img
          src="https://img.youpin.mi-img.com/jianyu/f06f8d1f73f635d268a2f2a51e0ec692.jpeg@base@tag=imgScale&h=367&m=1&q=80&w=750"
          alt=""></li>
    </ul>
    <!-- 开门红 -->
    <div class="shier">
      <img
        src="https://img.youpin.mi-img.com/jianyu/2c884997bcc868d3dd65b550f486b061.png@base@tag=imgScale&h=146&m=1&q=80&w=750"
        alt="">
    </div>
    <!-- 更多推荐 -->
    <div class="gengduo">
      <img
        src="https://img.youpin.mi-img.com/jianyu/4a5dd8ff48a35a46d45b2cbebee83c55.jpeg@base@tag=imgScale&h=157&m=1&q=80&w=750"
        alt="">
    </div>
    <div class="tuijian">
      <ul class="chanpin">
        <li>
            <img src="https://img.youpin.mi-img.com/shopmain/61bba1c1ef7e9d74cd43a5320905afc1.jpg@base@tag=imgScale&h=344&m=1&q=80&w=344" alt="">
          <div class="xiangqing">
            <span class="names">石头T7pro+手持H6</span>
            <span class="gongneng">扫吸拍档,一步配齐</span>
            <span class="mianxi">分期免息</span>
            <span class="shoujia">￥5598<span class="yuanjia">￥6598</span></span>
            <button>立即抢购</button>
          </div>
        </li>
         <li>
           <img src="https://img.youpin.mi-img.com/shopmain/0fbd81901e8f26a26ca8ab9887ea4e7f.jpg@base@tag=imgScale&h=344&m=1&q=80&w=344" alt="">
          <div class="xiangqing">
            <span class="names">石头T6pro+手持H6</span>
            <span class="gongneng">扫吸拍档，各司其职</span>
            <span class="mianxi">分期免息</span>
            <span class="shoujia">￥4598<span class="yuanjia">￥5498</span></span>
            <button>立即抢购</button>
          </div>
        </li>
         <li>
           <img src="https://img.youpin.mi-img.com/shopmain/61bba1c1ef7e9d74cd43a5320905afc1.jpg@base@tag=imgScale&h=344&m=1&q=80&w=344" alt="">
          <div class="xiangqing">
            <span class="names">石头清洁旗舰套装</span>
            <span class="gongneng">扫吸拍档,一步配齐</span>
            <span class="mianxi">分期免息</span>
            <span class="shoujia">￥4898<span class="yuanjia">￥5598</span></span>
            <button>立即抢购</button>
          </div>
        </li>
         <li>
           <img src="https://img.youpin.mi-img.com/shopmain/53311b615fd63776b42d6eace94787d2.jpg@base@tag=imgScale&h=344&m=1&q=80&w=344" alt="">
          <div class="xiangqing">
            <span class="names">扫地机可拆卸主刷</span>
            <span class="gongneng">尼龙材质，可拆卸设计</span>
            <span class="mianxi">分期免息</span>
            <span class="shoujia">￥99<span class="yuanjia"></span></span>
            <button>立即抢购</button>
          </div>
        </li>
         <li>
           <img src="https://img.youpin.mi-img.com/shopmain/79d501d7e9e1de33071bce10b3c087d6.jpg@base@tag=imgScale&h=344&m=1&q=80&w=344" alt="">
          <div class="xiangqing">
            <span class="names">扫地机一次性拖布</span>
            <span class="gongneng">60片装，即用即抛，简易更换</span>
            <span class="mianxi">分期免息</span>
            <span class="shoujia">￥99<span class="yuanjia">￥6598</span></span>
            <button>立即抢购</button>
          </div>
        </li>
         <li>
           <img src="https://img.youpin.mi-img.com/shopmain/409facb85f8874211645903b85638917.jpg@base@tag=imgScale&h=344&m=1&q=80&w=344" alt="">
          <div class="xiangqing">
            <span class="names">扫地机器人主刷</span>
            <span class="gongneng">焕新有周期，清扫更高效</span>
            <span class="mianxi">分期免息</span>
            <span class="shoujia">￥39<span class="yuanjia"></span></span>
            <button>立即抢购</button>
          </div>
        </li>
        
      </ul>
    </div>
    <img src="https://img.youpin.mi-img.com/jianyu/a45b2ffd672d1204f8d69a0cf62eb63d.jpeg@base@tag=imgScale&h=1110&m=1&q=80&w=750" alt="">
    <bottom/>
  </div>

</template>
<script>

import bottom from "@/components/gongyong/bottom.vue";
import titles from "@/components/gongyong/title.vue";
export default {
   components: {
    bottom,titles
  },
}
</script>
<style scoped>
.box {
  width: 100%;
  background-color: #8a1f25;
}
ul {
  width: 95%;
  margin: 0 auto;
}
img {
  width: 100%;
}
.shier {
  width: 93%;
  margin: 0 auto;
}
.gengduo img {
  width: 100%;
}
.tuijian{
  width: 100%;
  background: rgba(143, 17, 80, 0.226);
}
.chanpin{
  width: 98%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  }
.chanpin li{
  width: 48%;
  margin-bottom: 0.1rem;
  border-radius: 0.1rem;
  background:white;
  overflow: hidden;
}
.chnapin img{
  width: 100%;
} 
.xiangqing{
  height: 1.3rem;
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.yuanjia{
  font-size: 0.13rem;
  color: rgba(107, 107, 105, 0.623);
  text-decoration: line-through;
}
.shoujia{
  color: red;
  font-weight: 800;
  font-size: 0.18rem;
}
.names{
  font-size: 0.18rem;
}
.gongneng{
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.14rem;
  color: rgb(129, 129, 124);
}
.mianxi{
  width: 0.7rem;
  height: 0.2rem;
  background: rgb(238, 65, 108);
  text-align: center;
  font-size: 0.14rem;
  color: white;
  line-height: 0.2rem;
  border-radius: 0.08rem;
}
button{
  background: rgb(226, 50, 50);
  border: none;color: white;
  letter-spacing: 0.03rem;
  border-radius: 0.05rem;
  margin-bottom: 0.1rem;
}
</style>